<script setup name="Person" lang="ts">
import {reactive} from "vue";

// 数据
let car = reactive({brand: '奔驰', price: 100})
let games = reactive([
  {id: 1, name: '王者荣耀'},
  {id: 2, name: '英雄联盟'},
  {id: 3, name: '原神'},
  {id: 3, name: '明日之后'},
])
let obj = reactive({
  a: {
    b: {
      c: {
        d: 1
      }
    }
  }
})
console.log(car) // 响应式对象
console.log(games) // 响应式对象
console.log(Proxy)

function changePrice() {
  car.price += 10
}

function changeFirstGame() {
  games[0].name = '绝地求生'
}

function changeObj() {
  obj.a.b.c.d = 2
}
</script>

<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice">加价</button>
    <br>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="game in games" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏名字</button>
    <hr>
    <h2>
      测试：{{ obj.a.b.c.d }}
    </h2>
    <button @click="changeObj">测试</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px #000;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>